<template>

	<view>
		<u-navbar title="我的收藏" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="topBox">
				<view class="search">
					<u-search placeholder="搜索" v-model="keyword"></u-search>
				</view>
			</view>
			<view v-if="getFavor.length>0" class="collectList">
				<view class="collectItem" v-for="(item, index) in getFavor" >
					<u--image class="image" height="6rem" width="5rem" :src="item.coverImage"></u--image>
					<view class="bookInfo">
						{{index}}
						<view class="topBox">
							<view class="bookNS">
								<view class="bookName">{{ item.bookTitle }}</view>
								<view class="bookScore">豆瓣评分：{{ item.score }}</view>
							</view>
							<view class="bookAuthor">作者：{{ item.author }}</view>
							<view class="bookPublisher">出版社：{{ item.publisher }}</view>
						</view>
						<view class="bottomBox">
							<view class="bookPrice">￥{{ item.price }}</view>
							<u-button class="button" @click="moveCollect(item)" text="取消收藏" :hairline="false" shape="circle"
								size="mini"></u-button>
						</view>
					</view>

				</view>
			</view>
			<u-empty v-else marginTop="50%" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		name: 'collect',
		data() {
			return {
				keyword: '',				
			}
		},
		computed: {
			getFavor() {
				let kw = this.keyword;
				let list = this.$store.state.favor.favorlist || []
				// list = list.filter((item)=> {
				// 	return item.bookInfo.bookTitle.includes(kw) || item.bookInfo.author.includes(kw)
				// })\
				list = list.filter(function(item) {
					return item.bookTitle.includes(kw) || item.author.includes(kw)
				})
				return list
			}
			// ...mapGetters(['getFavor'])
		},
		methods: {
			moveCollect(book) {
				console.log(book)
				this.$store.dispatch('removeCollection',book.id).then(res => {
				    if (res == 'success') {
						// this.$store.dispatch('GetFavorList')
				        this.$tools.toast('取消收藏成功')
				      
				    } else {
				        this.$tools.toast('取消收藏失败')
				    }
				})
			}
		}

	}
</script>

<style lang="scss">
	.main {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.topBox{
			background: white;
			width: 100%;
			.search {
				background: white;
				margin-top: 0.5rem;
				width: 95%;
				padding-bottom: 0.5rem;
			}
		}

		.collectList {
			width: 100%;
			margin-top: 0.5rem;
			padding-bottom: 0.5rem;
			background: $uni-box-bg-color;

			.collectItem {
				background: white;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row;
				padding-bottom: 1rem;
				border-radius: 1rem;
				margin: 0.5rem;

				.image {
					margin-left: 0.5rem;
				}

				.bookInfo {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: space-around;

					.topBox {
						margin-left: 1rem;
						font-size: 0.8rem;
						color: #999;

						.bookNS {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							height: 2rem;
							padding: 0.5rem;

							.bookName {
								font-size: 1rem;
								font-weight: bold;
								color: #333;
							}

							.bookScore {
								margin-right: 1rem;
								font-size: 0.8rem;
								color: #999;
							}
						}
					}

					.bottomBox {
						margin-left: 1rem;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.bookPrice {
							// margin-left: 0.5rem;
							font-size: 0.8rem;
							color: $uni-color-theme-6;
						}

						.bookOldPrice {
							font-size: 0.8rem;
							color: #999;
							font-style: italic;
							text-decoration: line-through;
						}

						.button {
							margin-right: 1rem;
							width: 20%;
							background: $uni-color-theme-11;
							color: white;
							font-size: 0.8rem;
							width: 5rem;
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;
						}
					}


				}


			}
		}
	}
</style>
